<template>
  <div class="el-welthree">
      <div class="eltop">
        <div class="eltopchil">
          <div class="eltop1">
            <img src="../../assets/images/peach-svg/homepage/jifenze.svg"/>
            <div>
              <span>{{bonustol}}</span>
              <span>积分总额</span>
            </div>
          </div>
          <div class="eltop1" style="margin:0 30px">
            <img src="../../assets/images/peach-svg/homepage/jifenye.svg"/>
            <div>
              <span>{{rechargetol}}</span>
              <span>积分余额</span>
            </div>
          </div>
          <div class="eltop1">
            <img src="../../assets/images/peach-svg/homepage/zengsongjf.svg"/>
            <div>
              <span>{{deletol}}</span>
              <span>赠送积分</span>
            </div>
          </div>
        </div>
      </div>

      <div class="elbottom">
        <span class="eluser">我的客户</span>
        <div class="table">
        <LibVxeTable 
          :stripe="stripe"
          class="staticData"
          border="none" 
          :toolbar="false"
          :tableColumns="tableColumns"
          :tableData="list" 
          :PageObj="{total:totalCnt,currentPage:searchData.page_index,pageSize:searchData.page_size}" 
          @onPageChange="onChangePageSize"
          resizable>
        </LibVxeTable>      
        </div>

      </div>
      <div class="elright">
        <span class="elrightitle">价格明细</span>
        <div class="elrightlist">
          <div class="wel-box" v-for="(item,index) in priceList" :key="index">
            <div style="display: flex;
                align-items: center;">
              <img :src="item.img">
              <span>{{item.id}}</span>
            </div>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
  </div>    
</template>
<script>
import Request from "../../commons/Request"
export default {
  props:['bonustol','rechargetol','deletol',"priceList"],
  data(){
      return{
        searchData:{
        page_index:1,
        page_size:30,
      },
      list:[],
      totalCnt:0,
      stripe:false, 
        tableColumns:[
          {
            title: "账号",
            field: "account",
            align: 'center',
          },
          {
            title: "充值积分",
            field: "recharge_points",
            align: 'center',
            slots:{
            default:({row},h)=>{
              return [h("span",
                  {
                    style: {
                      color:"#0559FD",
                      width: "56px",
                    },
                  },row.recharge_points
                ),
              ]
            }
          }   
          },
          {
            title: "赠送积分",
            field: "bonus_points",
            align: 'center',
            slots:{
            default:({row},h)=>{
              return [h("span",
                  {
                    style: {
                      color:"#0559FD",
                      width: "56px",
                    },
                  },row.bonus_points
                ),
              ]
            }
          } 
          },{
            title: "积分总额",
            field: "ppoints",
            align: 'center',
            slots:{
            default:({row},h)=>{
              return [h("span",
                  {
                    style: {
                      color:"#0559FD",
                      width: "56px",
                    },
                  },row.ppoints
                ),
              ]
            }
          } 
          },
        ],
      }
  },
  created(){
    this.getList();
  },
  methods:{
    onChangePageSize(page,pageSize){
      this.searchData.page_index = page;
      this.searchData.page_size = pageSize;
      this.getList()
    },
    async getList(){
      let res5 = await Request.post("customer/user", "query_list",this.searchData);
      this.list=[]
      if(res5.code==0 && res5.data.list != null){
        res5.data.list.forEach((item) => {
          this.list.push({"account":item.account,"recharge_points":item.recharge_points/10000,"bonus_points":item.bonus_points/10000,"ppoints":(item.recharge_points+item.bonus_points)/10000});
        })  
        this.totalCnt=res5.data.total
      }
    }
  }
}
</script>